{% extends "base.html" %}

{% block title %}Welcome | {% endblock %}

<style>
{% block style %}

{% endblock %}
</style>




{% block content %}

{% if not recent_videos %}
<div class='row'>
<div class='col-sm-6 col-sm-offset-3'>

		<div class='col-sm-12'>
			<h1>Try these Videos</h1>
			{% for vid in random_videos %}
			<a href="{{ vid.get_absolute_url }}">{{ vid.title }}</a><br/>
			{% if forloop.counter == 1 %}
			<a href="{{ vid.get_absolute_url }}"><img src="{{ vid.category.get_image_url }}" class='img-responsive'/></a><br/>
			{% endif %}
			{% endfor %}
			<hr/>
		</div>

	
</div>
</div>
{% endif %}

<div class='row'>
<div class='col-sm-4'>
	<div class='row'>


	<div class='col-sm-12'>
		<h1>Recent Videos</h1>
	{% if recent_videos %}
		
			{% for vid in recent_videos %}
			<a href="{{ vid.get_absolute_url }}">{{ vid.title }}</a><br/>
				{% if forloop.counter == 1 %}
				<a href="{{ vid.get_absolute_url }}"><img src="{{ vid.category.get_image_url }}" class='img-responsive'/></a><br/>
				{% endif %}
			{% endfor %}
			


	{% else %}
	<p class='lead'>
	Recently viewed videos will be here.
	</p>


	{% endif %}
<hr/>
</div>


	{% if popular_videos %}
		<div class='col-sm-12'>
			<h1>Popular Videos</h1>
			{% for vid in popular_videos %}
			<a href="{{ vid.get_absolute_url }}">{{ vid.title }}</a><br/>
			{% if forloop.counter == 1 %}
			<a href="{{ vid.get_absolute_url }}"><img src="{{ vid.category.get_image_url }}" class='img-responsive'/></a><br/>
			{% endif %}
			{% endfor %}
			<hr/>
		</div>
	
	{% endif %}
	

	</div>
</div>


<div class='col-sm-8'>
	<h1>Recent Comments</h1>
	{% if recent_comments %}
		
			
			<table class='table'>
			{% for comment in recent_comments %}
				<tr><td><a href='{{ comment.get_absolute_url }}'>{{ comment.get_preview }}</a><br/><small>via {{ comment.user }}| {{ comment.timestamp|timesince }} ago</small> </td><td><a href='{{ comment.get_absolute_url }}'>View</a></td></tr>
			{% endfor %}

			</table>
	{% else %}

	<p class='lead'>
	All comments will be here.
	</p>
	{% endif %}

		</div>
</div>

{% endblock %}